<script setup lang="ts">
import { reqCertationType, reqUserCertation, reqUserInfo } from '@/apis/user';
import { CertationTypeResponseData, UseringoResponseData, UserParams } from '@/apis/user/type';
import { Warning } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const userInfo = ref<any>({})
const typeArr = ref<any>([])
const params = reactive<UserParams>({
  certificatesNo: '',
  certificatesType: '',
  certificatesUrl: '',
  name: ''
})
const dialogVisible = ref<boolean>(false)
const upload = ref<any>()
const form = ref<any>()

onMounted(() => {
  getUserInfo()
  getType()
})

const getUserInfo = async () => {
  const res: UseringoResponseData = await reqUserInfo()
  if (res.code == 200) {
    userInfo.value = res.data
  }
}

const getType = async () => {
  const res: CertationTypeResponseData = await reqCertationType()
  if (res.code == 200) {
    typeArr.value = res.data
  }
}

const exceedHandler = () => {
  ElMessage({
    type: 'error',
    message: '仅能上传两张图片'
  })
}

const successHandler = (response: any, uploadFile: any, uploadFiles: any) => {
  form.value.clearValidate()
  params.certificatesUrl = response.data
  ElMessage({
    type: 'success',
    message: '上传成功!'
  })
}

const errorHandler = () => {
  ElMessage({
    type: 'error',
    message: '上传失败!'
  })
}

const previewHandler = (uploadFile: any) => {
  params.certificatesUrl = uploadFile.url
  dialogVisible.value = !dialogVisible.value
}

const reset = () => {
  upload.value.clearFiles()
  Object.assign(params, {
    certificatesNo: '',
    certificatesType: '',
    certificatesUrl: '',
    name: ''
  })
}

const submit = async () => {
  await form.value.validate()
  try {
    await reqUserCertation(params);
    ElMessage({
      type: 'success',
      message: '认证成功'
    })
    getUserInfo()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '认证失败'
    })
  }
}

const validatorName = (rule: any, value: any, callback: any) => {
  const reg = /^[\u4e00-\u9fa5]{2,4}$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的姓名'))
  }
}

const validatorType = (rule: any, value: any, callback: any) => {
  if (value == '10' || value == '20') {
    callback()
  } else {
    callback(new Error('请选择证件类型'))
  }
}

const validatorNo = (rule: any, value: any, callback: any) => {
  const reg = /^[0-9]{10,20}$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的证件号码'))
  }
}

const validatorUrl = (rule: any, value: any, callback: any) => {
  if(value.length){
    callback()
  }else{
    callback(new Error('请上传证件照片'))
  }
}

//自定义表单校验 
const rules = {
  name: [{
    require: true,
    validator: validatorName,
  }],
  certificatesType: [{
    require: true,
    validator: validatorType,
  }],
  certificatesNo: [{
    require: true,
    validator: validatorNo,
  }],
  certificatesUrl: [{
    require: true,
    validator: validatorUrl,
  }]
}
</script>



<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h2>实名信息</h2>
      </div>
    </template>
    <div class="tip">
      <el-icon>
        <Warning />
      </el-icon>
      <p>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。</p>
    </div>
    <!-- 信息展示 -->
    <el-descriptions v-if="userInfo.authStatus" :column="1" border style="margin: 30px 0;">
      <el-descriptions-item :width="30" label-align="center">
        <template #label>
          <div class="cell-item">
            用户姓名
          </div>
        </template>
        {{ userInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item :width="30" label-align="center">
        <template #label>
          <div class="cell-item">
            证件类型
          </div>
        </template>
        {{ userInfo.certificatesType == '10' ? "身份证" : "户口本" }}
      </el-descriptions-item>
      <el-descriptions-item :width="30" label-align="center">
        <template #label>
          <div class="cell-item">
            证件号码
          </div>
        </template>
        {{ userInfo.certificatesNo }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- 信息认证 -->
    <el-form v-else style="width: 60%; margin: 20px auto;" label-width="80" :model="params" :rules="rules" ref="form">
      <el-form-item label="用户姓名" prop="name">
        <el-input placeholder="请输入用户姓名" v-model="params.name"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="certificatesType">
        <el-select placeholder="请选择证件类型" v-model="params.certificatesType">
          <el-option :label="item.name" v-for="(item, index) in typeArr" :value="item.value" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="certificatesNo">
        <el-input placeholder="请输入证件号码" v-model="params.certificatesNo"></el-input>
      </el-form-item>
      <el-form-item label="上传证件" prop="certificatesUrl">
        <el-upload ref="upload" list-type="picture-card" action="/api/oss/file/fileUpload?fileHost=userAuah" :limit="2"
          :on-preview="previewHandler" :on-exceed="exceedHandler" :on-success="successHandler" :on-error="errorHandler">
          <img style="width: 100%;height: 100%;" src="../../../assets/images/auth_example.png" alt="" />
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full style="width: 100%;height: 100%;" :src="params.certificatesUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="submit">提交</el-button>
        <el-button type="primary" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>



<style scoped lang="scss">
.box-card {
  margin-top: 30px;

  .tip {
    display: flex;
    font-size: 14px;
    color: #7f7f7f;
  }
}
</style>